<template>
	<view class="fu-p-30">
		<demo-desc>
			此组件一般用于左滑唤出操作菜单的场景，用的最多的是左滑删除操作。
		</demo-desc>

		<fu-section title="基本案例" customClass="fu-m-t-20" type="line">
			<fu-swipe-action class="fu-m-t-20">
				<fu-swipe-action-item :right-options="options" @click="onClick">
					<view class="swipe-action__item fu-flex fu-flex-column-center">
						<view class="swipe-action__item__image">
							<image :src="avatar" mode="scaleToFill"></image>
						</view>
						<view class="swipe-action__item__info">
							<view class="swipe-action__item__info__title">
								基本使用
							</view>
							<view class="swipe-action__item__info__desc">
								向左滑动即可看到
							</view>
						</view>
					</view>
				</fu-swipe-action-item>
			</fu-swipe-action>
		</fu-section>

		<fu-section title="多菜单" customClass="fu-m-t-20" type="line">
			<fu-swipe-action class="fu-m-t-20">
				<fu-swipe-action-item :right-options="options2" @click="onClick">
					<view class="swipe-action__item fu-flex fu-flex-column-center">
						<view class="swipe-action__item__image">
							<image :src="avatar" mode="scaleToFill"></image>
						</view>
						<view class="swipe-action__item__info">
							<view class="swipe-action__item__info__title">
								多菜单
							</view>
							<view class="swipe-action__item__info__desc">
								向左滑动即可看到
							</view>
						</view>
					</view>
				</fu-swipe-action-item>
			</fu-swipe-action>
		</fu-section>

		<fu-section title="关联打开滑动菜单" customClass="fu-m-t-20" type="line">
			<fu-swipe-action class="fu-m-t-20">
				<fu-swipe-action-item v-for="(item,index) in 2" :key="index" :right-options="options2" @click="onClick">
					<view class="swipe-action__item fu-flex fu-flex-column-center">
						<view class="swipe-action__item__image">
							<image :src="avatar" mode="scaleToFill"></image>
						</view>
						<view class="swipe-action__item__info">
							<view class="swipe-action__item__info__title">
								关联打开滑动菜单
							</view>
							<view class="swipe-action__item__info__desc">
								向左滑动即可看到，同时只能打开一个菜单
							</view>
						</view>
					</view>
				</fu-swipe-action-item>
			</fu-swipe-action>
		</fu-section>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';

	// data数据
	let avatar = ref('https://mp-537f4c84-f806-461e-b77b-937c4698216a.cdn.bspapp.com/素材/头像/打工人.webp');
	const options = reactive([{
		text: '取消',
		style: {
			backgroundColor: '#007aff'
		}
	}, {
		text: '确认',
		style: {
			backgroundColor: '#dd524d'
		}
	}]);
	const options2 = reactive([{
		text: '置顶',
		style: {
			backgroundColor: '#FFA726'
		}
	}, {
		text: '删除',
		style: {
			backgroundColor: '#E83A30'
		}
	}]);
	const options3 = reactive([{
		text: '置顶',
		icon: 'star',
		style: {
			backgroundColor: '#FFA726'
		}
	}, {
		text: '删除',
		icon: 'delete',
		style: {
			backgroundColor: '#E83A30'
		}
	}]);
	const options4 = reactive([{
		icon: 'star',
		style: {
			backgroundColor: '#FFA726',
			width: '80rpx',
			height: '80rpx',
			margin: '0 12rpx',
			borderRadius: '100rpx'
		}
	}, {
		icon: 'delete',
		style: {
			backgroundColor: '#E83A30',
			width: '80rpx',
			height: '80rpx',
			margin: '0 12rpx',
			borderRadius: '100rpx'
		}
	}]);

	// methods方法
	const onClick = (e) => {
		console.log(e)
	};
</script>

<style lang="scss">
	page {
		background-color: $bg-color;
	}

	.swipe-action__item {
		padding: 10rpx 0;

		&__image {
			image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 20rpx;
			}
		}

		&__info {
			margin-left: 20rpx;

			&__title {
				font-size: 30rpx;
				font-weight: bold;
			}

			&__desc {
				margin-top: 5rpx;
				font-size: 22rpx;
				color: #999999;
			}
		}
	}
</style>